import React from 'react';
import Icon from '../icon';
import s from './style.module.css';
import PropTypes from 'prop-types';
import { datetime } from '../../../../../common/formatter';
import Tooltip from '@kuiper-components/tooltip';

const infoObj = {
	taskId: '检测任务ID',
	name: '任务名称',
	target: '检测资产',
	endTime: '检测结束时间',
};

export default function Right({ info }) {
	const taskInfo = info.task;
	if (taskInfo) {
		taskInfo.endTime = datetime(taskInfo?.endTime);
	}
	const support = () => {
		// eslint-disable-next-line no-prototype-builtins
		if (info.hasOwnProperty('is_support_ipv6')) {
			if (info.is_support_ipv6) {
				return (
					<p className={s.rBoxp2}>
						当前资产支持IPv6服务，建议使用
						<a
							href="https://defense.yunaq.com/ipv6/"
							target="_blank"
							rel="noreferrer"
						>
							知道创宇IPv6安全防护
						</a>
						服务，无需改动源站，直接对IPv6流量进行防御清洗，保障业务系统IPv6网络安全。
					</p>
				);
			} else {
				return (
					<p className={s.rBoxp2}>
						当前资产暂不支持IPv6服务，建议使用
						<a
							href="https://defense.yunaq.com/ipv6/"
							target="_blank"
							rel="noreferrer"
						>
							知道创宇IPv6安全改造
						</a>
						服务，无需改动源站，快速具备IPv6终端访问能力。
					</p>
				);
			}
		} else {
			return <p className={s.rBoxp2}>当前资产正在检测中，请稍后……</p>;
		}
	};
	return (
		<div className={s.right}>
			<div className={s.title}>IPv6检测</div>
			<div className={s.info}>
				{Object.keys(infoObj).map(e => {
					return (
						<p key={e} className={s.infoP}>
							<span>{infoObj[e]}</span>：
							{e === 'target' && taskInfo ? (
								<Tooltip overlay={taskInfo[e]} placement={'top'}>
									<span className={s.infoP3}>{taskInfo[e]}</span>
								</Tooltip>
							) : (
								<span className={s.infoP2}>
									{taskInfo ? taskInfo[e] : '- -'}
								</span>
							)}
						</p>
					);
				})}
			</div>
			<div className={s.rBox}>
				<p className={s.rBoxp1}>
					<span className={s.icon}>
						<Icon active={4} />
					</span>
					检测结果
				</p>
				{support()}
			</div>
		</div>
	);
}
Right.propTypes = {
	info: PropTypes.any,
};
